<template>
	<div class="mv">
	  <!-- 顶部分类标签 -->
	  <div class="tags" ref="tagsnav">
		<TagsBar :taglist="areaList" @tagBarClick="areaClick" />
		<TagsBar :taglist="typeList" @tagBarClick="typeClick" />
		<TagsBar :taglist="orderList" @tagBarClick="orderClick" />
	  </div>
	  <!-- MV列表 -->
	  <div class="mv-list">
		<VideoList :videolist="mvList" />
	  </div>
	</div>
  </template>
  
  <script setup>

  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import { getAllMv } from '@/network/recvideo/recvideo';
  import VideoList from '@/components/content/videolist/VideoList.vue';
  import TagsBar from '@/components/content/TagsBar.vue';
  
  // 定义响应式变量
  const areaList = {
	category: "地区",
	list: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
  };
  const typeList = {
	category: "类型",
	list: ["全部", "官方版", "原生", "现场版"],
  };
  const orderList = {
	category: "排序",
	list: ["上升最快", "最热", "最新"],
  };
  const mvList = ref([]);
  const hasMore = ref(false);
  const area = ref("全部");
  const type = ref("全部");
  const order = ref("上升最快");
  const limit = 40;
  const page = ref(1);
  
  // 获取MV数据的函数
  const getAllMvBy = async (area, type, order, page) => {
	const offset = (page - 1) * limit;
	try {
	  const res = await getAllMv(area, type, order, offset, limit);
	  if (res.data.hasMore) {
		mvList.value.push(...res.data.data);
		hasMore.value = res.data.hasMore;
		page.value += 1;
	  }
	} catch (error) {
	  console.error(error);
	}
  };
  
  // 标签点击事件
  const areaClick = (item) => {
	page.value = 1;
	mvList.value = [];
	area.value = item;
	getAllMvBy(item, type.value, order.value, page.value);
  };
  
  const typeClick = (item) => {
	page.value = 1;
	mvList.value = [];
	type.value = item;
	getAllMvBy(area.value, item, order.value, page.value);
  };
  
  const orderClick = (item) => {
	page.value = 1;
	mvList.value = [];
	order.value = item;
	getAllMvBy(area.value, type.value, item, page.value);
  };
  
  // 滚动加载更多
  const more = () => {
	const view = document.querySelector(".view");
	if (Math.ceil(view.scrollTop) + view.clientHeight >= view.scrollHeight) {
	  getAllMvBy(area.value, type.value, order.value, page.value);
	}
  };
  
  // 生命周期钩子
  onMounted(() => {
	// 默认请求数据
	getAllMvBy("全部", "全部", "上升最快", 1);
	document.querySelector(".view").addEventListener("scroll", more);
  });
  
  onBeforeUnmount(() => {
	document.querySelector(".view").removeEventListener("scroll", more);
  });
  </script>
  
  <style lang="less" scoped>
  .mv {
	position: relative;
  }
  .mv-list {
	padding-top: 30px;
  }
  </style>
  